<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>我的课堂</title>
    <link rel="stylesheet" href="../../static/Semantic-UI-master/dist/semantic.min.css" th:href="@{/Semantic-UI-master/dist/semantic.min.css}">
    <link rel="stylesheet" href="../../static/css/custom.css" th:href="@{/css/custom.css}">
</head>
<body>
<!--此页面应有个人信息、头像、账户安全、我的课程-->
<nav class="ui attached segment m-padded-tb-mini">
    <div class="ui container">
        <div class="ui menu secondary font-size-middle font-y-center">

                <span class="ui teal header item">
                <img src="../../static/imges/1.png" th:src="@{/imges/1.png}" class="image-size-mini"/>
                </span>
            <a class="item" th:href="@{/}"><i class="home icon"></i>首页</a>
            <a class="item" th:href="@{/sy/syuser/syclass}"><i class="building icon"></i>sy课堂</a>
            <a class="item" href="aboutwe.html" th:href="@{/sy/syuser/aboutwe}"><i class="info icon"></i>关于我们</a>

            <div class="item right" th:if="${session.User}">
                <div class="ui simple dropdown">
                    <img class="ui avatar image dropdown" src="../static/imges/user.jpg" th:src="${session.User.userImg}">
                    <span th:text="${session.User.userName}"></span>
                    <div class="menu">
                        <a href="User/userPC.html" th:href="@{/sy/syuser/gopc}" class="item"><i class="user circle icon"></i>个人主页</a>
                        <a href="User/userPC.html" th:href="@{/sy/syuser/gopc}" class="item"><i class="edit outline icon"></i>管理中心</a>
                        <a href="/sy/syuser/logout" class="item"><i class="sign out alternate icon"></i>退出登录</a>
                    </div>
                </div>
            </div>


        </div>

    </div>
</nav>
<div class="ui container m-padded-tb-middle">

    <div class="ui grid">
        <!--  左侧导航栏  -->
        <div class="five wide column slide">
            <div class="ui link list segment" style="height: 400px">
                <div class="active item m-padded-tb-middle font-x-center">个人中心</div>
                <a class="item" href="userPC.html" th:href="@{/sy/syuser/gopc}"><button class="fluid ui button teal m-padded-tb-middle" id="xinxi">个人信息</button></a>
                <a class="item"><button class="fluid ui button teal active m-padded-tb-middle" id="kecheng">我的课程</button></a>
                <a class="item" href="SeCenter.html" th:href="@{/sy/syuser/SeCenter}"><button class="fluid ui button teal m-padded-tb-middle" id="anquan">账号安全</button></a>
            </div>
        </div>
<!--        右侧内容-->
        <div class="eleven wide column" id="pc_classp">
    <div class="ui segment font-x-center" id="pc_page">
        <table class="ui striped table">
            <thead>
            <th>我加入的课程</th>
            <th></th>
            <th></th>
            </thead>
            <tbody>
            <tr class="top aligned" th:each="usercourse:${session.userscourse}">
                <td style="width: 13em !important;">
                    <div class="ui simple dropdown">
                        <img class="image-size-bigD" src="../../static/imges/timg.jpg" th:src="${usercourse.courseImge}">
                        <div class="menu">
                            <a href="javascript:void(0);" onclick="delcourse(this);" th:id="${usercourse.courseId}" class="item"><i class="sign out alternate icon"></i>退出课程</a>
                        </div>
                    </div>
                </td>
                <td style="width: 27em !important;"><a href="details.html" class="font-color" th:href="@{/sy/course/details(id=${usercourse.courseId})}" th:text="${usercourse.courseName}">Linux操作系统基础操作命令教程</a></td>
                <td class="top aligned"><br><br>
                    <a href="courseware.html" th:href="@{/sy/course/courseware(courseid=${usercourse.courseId})}" class="ui teal button">继续学习课程</a>
                </td>
            </tr>

            </tbody>
        </table>
    </div>
</div>
    </div>
</div>
<footer class="ui vertical segment b-color m-padded-tb-big">
    <div class="ui container">
        <div class="ui grid">
            <div class="eight wide column">
                <a class="item" href="aboutwe.html" th:href="@{/sy/syuser/aboutwe}">关于我们</a><br><br><br>
                <span class="ui teal header" style="display: inline;">
                        <img src="../../static/imges/1.png" th:src="@{/imges/1.png}"/></span>
                <span class="font-tmd">&nbsp;生命可以随心所欲，但不可以随波逐流。</span>
            </div>

            <div class="eight wide column font-tmd">
                计科172 梁瑜<br>
                2020/10/28
            </div>
        </div>
    </div>
    <input id="username" type="text" hidden th:value="${session.User.userName}">
</footer>
</body>
<script src="../../static/js/jquery-1.12.4.min.js" th:src="@{/js/jquery-1.12.4.min.js}"></script>
<script src="../../static/js/jquery-ui.min.js" th:src="@{/js/jquery-ui.min.js}"></script>
<script src="../../static/Semantic-UI-master/dist/semantic.min.js" th:src="@{/Semantic-UI-master/dist/semantic.min.js}"></script>
<script src="../../static/js/sy.min.js" th:src="@{/js/sy.min.js}"></script>
<script type="text/javascript" th:inline="javascript">
    $(function () {
        const username = $("#username").val()
        if(username === ''){
            // window.location.replace("/sy/syuser/gologin")
        }
    })

    function delcourse(T) {
        var con = confirm('是否要退出此课程？')
        if(con==true){
            var courseid = T.id;
            $.ajax({
                type: 'get',
                cache: false,
                url: '/sy/xktable/deletmycourse',
                data: {
                    'courseId': courseid
                },
                contenType: 'application/json;charset=utf-8',
                success: function (data) {
                    if(data){
                        // alert("已退出该课程")
                        window.location.replace("/sy/xktable/showmyclass")
                    }
                },
                error: function () {
                    alert("出错了")
                }
            })
        }
    }
</script>
</body>
</html>